Treeview

I’m going to provide a simple example how to display hierarchical data from SQL Server database in the TreeView. A requirement is that the implementation should not be dependant on the hierarchy level in the database. It means that the TreeView implementation should be capable of displaying data from any level, no matter how deep.

Listing #1 : TreeviewEx.aspx

 <asp:TreeView ID="tvCategoryList" runat="server" ImageSet="BulletedList3" Width="100%"
        ShowExpandCollapse="True" NodeWrap="True" OnTreeNodePopulate="tvCategoryList_TreeNodePopulate"
        ExpandDepth="2" PopulateNodesFromClient="False">
        <ParentNodeStyle Font-Bold="True" />
        <RootNodeStyle Font-Bold="True" CssClass="Table_Title_Label_Black12" />
        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
        <SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px"
            ForeColor="#5555DD" />
        <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px"
            NodeSpacing="0px" VerticalPadding="0px" />
    </asp:TreeView>

Next, we start looking at the code in the TreeviewEx.aspx,cs file. We want to populate the root level. Here’s the code.

Listing #2

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            PopulateRootLevel();
        }
    }

This happens by connecting to the database, querying the first set of nodes (having null as the parent id), and creating TreeNode objects with the PopulateNodes routine, which follows next.

Listing #3

 private void PopulateRootLevel()
    {
        DataTable dt = BAL_Category.GetParentCategory();// Get Parent CategoryList From Database
        PopulateNodes(dt, tvCategoryList.Nodes);
    }

Next, we want to create the routine to populate the child nodes of a given node. This happens with the PopulateSubLevel method.

Listing #4

 private void PopulateSubLevel(int parentid, TreeNode parentNode)
    {
        // Get CategoryList by ParentID From Database
        DataTable dt = BAL_Category.GetChildCategory(parentid);
        PopulateNodes(dt, parentNode.ChildNodes);
    }

Here, the idea is the same as with the root level, but with the distinction that only child nodes of the given node are queried and populated with the PopulateNodes method (described earlier). The trick to triggering the populating of the child nodes is as follows.

Listing #5

protected void tvCategoryList_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    PopulateSubLevel(Int32.Parse(e.Node.Value), e.Node);
}

TreeNodePopulate is raised for a TreeNode which is expanded by the user for the first time. Due to PopulateNodesFromClient (TreeView) and PopulateOnDemand (TreeNode) settings, this happens with the client-side callback mechanism which is handled by the ASP.NET Page framework. This means that populating does not involve a postback. And, due to better cross-browser support in ASP.NET 2.0, this also works for other browsers such as Firefox. Note that clicking on the node does cause a postback because I haven’t modified the select action of the populated tree nodes from the defaults.

Listing #6

private void PopulateNodes(DataTable dt, TreeNodeCollection nodes)
    {
        foreach (DataRow dr in dt.Rows)
        {
            TreeNode tn = new TreeNode();
            tn.Text = dr["Category"].ToString();
            tn.Value = dr["CategoryID"].ToString();
            int NoofChild = Convert.ToInt32(dr["childnodecount"].ToString());
            if (NoofChild != 0)
            {
                tn.PopulateOnDemand = true;
                tn.SelectAction = TreeNodeSelectAction.None;
            }
            else
            {
                tn.PopulateOnDemand = false;
                if (dr["TotalDoc"].ToString().Equals("0") == false)
                {
                    tn.NavigateUrl = "~/CategoryWiseProductList.aspx?ID=" + dr["CategoryID"].ToString();
                    tn.Text = tn.Text + " (" + dr["TotalProduct"].ToString() + ")";
                }
                else
                {
                    tn.NavigateUrl = "javascript:alert('Product is not Available Under this Category.')";
                }
            }
            nodes.Add(tn);
        }
    }

Hope this will Help you !!!

Happy Programming

Ramani Sandeep

ASTreeView – A Powerful ASP.Net TreeView Control

Display Hierarchical Data with TreeView in ASP.NET 2.0